<template>
  <div class="main-view">
    <div class="main-view-button">
      <el-button @click="editData()" type="primary">{{titleName}}轮播图</el-button>
    </div>
    <div class="main-view-info" v-loading="loading">
      <div v-if="state.listData.length > 0" class="view-info-list">
        <el-table :max-height="state.posheight" :data="state.listData" border>
          <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
          <el-table-column prop="img" label="图片" align="center">
            <template #default="scope">
              <img :src="scope.row.img_url" alt="" style="width: 300px; height: 200px;">
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else class="right-view-nodata">
        <img src="@/assets/img/no-data.png" alt="">
        <div>暂无数据</div>
      </div>
    </div>
    <!-- 新增、编辑、删除图片 -->
    <el-dialog
      width="25%"
      :title="titleName + '轮播图'"
      :close-on-click-modal="false"
      v-model="viewVisible">
      <editCarousels v-if="viewVisible" :parmas="state.propList" @closeImgDialog="closeImgDialog"></editCarousels>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref,reactive,onMounted,watch, } from 'vue';
  import { ElMessage  } from 'element-plus';
  import API from "@/utils/api";
  import editCarousels from "./editCarousels.vue";
  const loading = ref(false)
  const viewVisible = ref(false)
  const titleName = ref('')
  const state = reactive({
    listData:[],
    h: document.body.clientHeight,
    posheight: 100,
    timer: false,
    propList:[],
  })
  watch(() => state.h, (newValue, oldValue) => {
    if(!state.timer) {
      state.posheight = newValue - 150
      state.timer = true
      setTimeout(function (){
        state.timer = false
      },400)
    }
  })
  onMounted(() => {
    posTableHeight()
    getCarouselList()
    window.onresize = () => {
      return (() => {
        let a = document.body.clientHeight
        state.h = a
      })()
    }
  })
  const posTableHeight = (() =>{
    let h = document.body.clientHeight,
    new_h = h - 150;
    state.posheight = new_h;
  }) 
  const getCarouselList = (() => {
    loading.value = true
    API.carouselsList.getCarouselsList({},(res) => {
      loading.value = false
      if(res.code === 0) {
        state.listData = res.data
        if(res.data.length < 1) {
          titleName.value = '新增'
        }else {
          titleName.value = '编辑'
        }
      }
    })
  })
  const editData = (() => {
    viewVisible.value = true
    if(state.listData.length > 0) {
      titleName.value = '编辑'
      state.propList = state.listData
    }else {
      titleName.value = '新增'
    }
  })
  const closeImgDialog = ((val) => {
    viewVisible.value = false
    if(val === 1) {
      getCarouselList()
    }
  })
</script>

<style lang="scss" scoped>
.main-view {
  padding: 20px;
  .main-view-button {
    display: flex;
    text-align: start;
    .input-with-select {
      margin-left: 15px;
    }
    .input-with-button {
      color: #fff;
      background: #409eff;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .el-input-group {
      width: 370px;
    }
  }
  .right-view-nodata {
    margin-top: 160px;
  }
  .main-view-info {
    margin: 30px 0;
    .view-info-list {
      display: flex;
      justify-content: space-around;
      width: 100%;
      .info-list-img {
        width: 30%;
        img {
          width: 300px;
          height: 200px;
        }
      }
    }
  }
  .right-view-page {
    display: flex;
    justify-content: end;
    margin-top: 15px;
  }
}
::v-deep .el-upload__tip {
  margin-top: 0;
  line-height: 20px;
  text-align: start;
}
::v-deep .upload-demo {
  width: 80%;
}
::v-deep .el-upload {
  text-align: start;
  display: block;
}
</style>